<template>
  <view class="">
    <!-- <uni-nav-bar title="配售详情"  fixed empty backgroundColor="#fff">
			<view class="flex align-center" slot="left">
				<tui-icon @click="navBack"  name="arrowleft"  :size="22"></tui-icon>
			</view>
		</uni-nav-bar> -->
    <!-- <tt-navbar
      :left="true"
      title="配售详情"
      rightText=""
      @lclick="navBack"
    ></tt-navbar> -->
    <t-header @back="navBack">配售详情</t-header>

    <view class="page padding" style="min-height: calc(100vh - 5rem)">
      <view class="tit">基本资料</view>
      <view class="card text-nomal">
        <view class="flex align-center padding-tb-sm">
          <text class="text-gray">股票代码</text>
          <text class="padding-left">{{ detail.code }}</text>
          <text class="text-gray margin-left-xl">申购代码</text>
          <text class="padding-left">{{ detail.sgcode }}</text>
        </view>
        <view class="flex align-center padding-tb-sm" v-if="detail.content">
          <text class="text-gray flex-grow-0">所属行业</text>
          <text class="padding-left">{{ detail.content }}</text>
        </view>
        <view class="flex align-center padding-tb-sm">
          <text class="text-gray">行业市盈</text>
          <text class="padding-left">{{ detail.fx_rate }}%</text>
          <text class="text-gray margin-left-xl">所属板块</text>
          <text class="padding-left text-orange">{{
            detail.sg_type_text
          }}</text>
        </view>
      </view>

      <view class="tit">发行信息</view>
      <view class="card text-nomal">
        <view class="flex align-center padding-tb-sm justify-between">
          <text class="text-gray flex-grow-0">发行价格(元)</text>
          <text class="padding-left">{{ detail.fx_price || 0.0 }}</text>
        </view>
        <view class="flex align-center padding-tb-sm justify-between">
          <text class="text-gray flex-grow-0">发行数量(万股)</text>
          <text class="padding-left">{{ detail.fx_num / 10000 || 0 }}</text>
        </view>
        <view class="flex align-center padding-tb-sm justify-between">
          <text class="text-gray flex-grow-0">网上发行数量(万股)</text>
          <text class="padding-left">{{ detail.wsfx_num / 10000 || 0 }}</text>
        </view>
      </view>

      <view class="pos-b">
        <view>配售(手数)</view>
        <!-- <tui-numberbox :min="1" @change="changeNum" :step="1"  :value="handNum" :width="160" :max="detail.sg_limit*1/100"></tui-numberbox> -->
        <tui-numberbox
          :min="1"
          @change="changeNum"
          :step="1"
          :value="handNum"
          :width="160"
          :max="maxxg"
        ></tui-numberbox>
        <tui-button
          :loading="submiting"
          :disabled="submiting"
          @click="handleClick9"
          margin="0 0 0 30rpx"
          type="theme"
          :size="28"
          height="80rpx"
          >￥{{ payTotal }}配售</tui-button
        >
        <!-- <tui-button @click="submit" margin="0 0 0 30rpx" type="theme" :size="28" height="80rpx">确认</tui-button> -->
      </view>

      <!-- 密钥输入框 -->
      <tui-modal :show="modal9" @cancel="hide9" :custom="true" fadeIn>
        <view style="text-align: center">
          <view style="padding-bottom: 20rpx; font-size: 34rpx">密钥</view>
          <view style="width: 80%; height: 82rpx; margin: 30rpx auto 50rpx">
            <input
              type="password"
              placeholder="请输入密钥"
              style="
                border-bottom: 1rpx solid #e6e6e6;
                height: 80rpx;
                font-size: 28rpx;
                text-align: center;
              "
              v-if="modal9"
              v-model="miyao"
            />
          </view>
          <tui-button
            :loading="submiting"
            :disabled="submiting"
            height="72rpx"
            type="theme"
            :size="28"
            shape="circle"
            @click="submit"
            >立即提交</tui-button
          >
        </view>
      </tui-modal>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { newStockDetail, offlineAdd } from '@/api/index.js';
  import { onLoad } from '@dcloudio/uni-app';
  import THeader from '@/components/views/t-header/index.vue'; // 头部组件
  import tui from '@/common/httpRequest';

  const handNum = ref(1);
  const detail = ref({});
  const maxxg = ref(10000);
  const submiting = ref(false);
  const miyao = ref('');
  const modal9 = ref(false);

  // 计算属性
  const payTotal = computed(() => {
    return (handNum.value * 100 * detail.value.fx_price).toFixed(2);
  });

  // 获取详情
  const getDetail = async (id) => {
    newStockDetail({ id }).then((res) => {
      detail.value = res.data.info;
      console.log(res.data.psmax);
      maxxg.value = parseInt(res.data.psmax);
    });
  };

  onLoad((t) => {
    getDetail(t.id);
  });

  const hide9 = () => {
    modal9.value = false;
  };

  const changeNum = (e) => {
    // console.log(e)
    handNum.value = e.value;
  };

  const handleClick9 = () => {
    // 需要判断 是否是设置了密钥
    console.log(detail.value.content);
    if (detail.value.content) {
      modal9.value = true;
    } else {
      submit();
    }
  };

  const submit = () => {
    hide9();
    console.log(detail.value.content);
    if (detail.value.content) {
      if (!miyao.value) {
        return tui.toast('请输入正确的密钥');
      }
    }
    tui.modal(null, '确定配售吗？', true, (e) => {
      if (e) {
        submiting.value = true;
        offlineAdd({
          code: detail.value.code,
          sg_nums: handNum.value,
          total_nums: handNum.value * 100,
          money: payTotal.value,
          dj_money: payTotal.value,
          miyao: miyao.value,
        }).then((res) => {
          tui.modal(null, res.msg, false, () => {
            if (res.code == 1) {
              submiting.value = false;
              uni.redirectTo({
                url: '/pages/placementRecord/index',
              });
            } else {
              submiting.value = false;
            }
          });
        });
      } else {
        submiting.value = false;
      }
    });
  };
</script>

<style lang="scss" scoped>
  .boxshow {
    box-shadow: 0 0rpx 16rpx rgba(0, 0, 0, 0.14);
    border-radius: 16rpx;
  }
  .tit {
    font-size: 30rpx;
    font-weight: bold;
    margin: 20rpx 0;
    padding-top: 10rpx;
  }
  .card {
    @extend .boxshow;
    padding: 0 20rpx;
  }
  .pos-b {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 20rpx;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.14);
  }
</style>
